<!DOCTYPE html>
<html>
<head>
	<title>我的优惠券</title>
	<link rel="stylesheet" type="text/css" href="./dist/lib/weui.min.css">
	<link rel="stylesheet" type="text/css" href="./statics/style/myCoin.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		.couponPic {
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.couponPic .coupon1 {
			width: 325px;
			background: url("./statics/img/5yuan1.png") no-repeat center;
			background-size: 325px 98px;
			display: flex;
			height: 98px;
			margin-bottom: 7px;
		}
		.coupon1 .price {
			margin: 24px 17px;
			text-align: center;
			font-size: 12px;
			color: #ffc91f;
		}
		.coupon1 .price .num {
			font-size: 34px;
		}
		.coupon1 .name {
			display: flex;
			flex-direction: column;
			font-size: 12px;
			color: #fff;
			margin: 29px 23px;
		}
		.coupon1 .name p {
			margin: 0;
			line-height: 14px;
		}
		.coupon1 .name p:first-child {
			margin-bottom: 19px;
			font-size: 14px;
		}
		.couponPic .coupon2 {
			background: url("./statics/img/5yuan2.png") no-repeat center;
			background-size: 325px 98px;
		}
		.coupon2 .price {
			color: #07a5bb;
		}
	</style>  
</head>
<body>
	<div class="mainContent">
		<div class="weui-flex couponPic">
			<div class="coupon1">
				<div class="price">
					<p>￥<span class="num">5</span></p>
					<span>满100使用</span>
				</div>
				<div class="name">
					<p>课程通用优惠券</p>
					<p>2018.5.6-2018.7.8</p>
				</div>
			</div>
			<div class="coupon1 coupon2">
				<div class="price">
					<p>￥<span class="num">5</span></p>
					<span>满100使用</span>
				</div>
				<div class="name">
					<p>课程通用优惠券</p>
					<p>2018.5.6-2018.7.8</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>